<template>
	<view class="page">
		<!-- 搜索区域 -->
		<view class="search-area">
			<view class="search-input-wrapper">
				<icon class="search-icon" type="search" size="20"></icon>
				<input class="search-input" type="text" v-model="searchQuery" placeholder="搜索团名称或编号"
					@confirm="handleSearch" />
				<icon v-if="searchQuery" class="clear-icon" type="clear" size="20" @tap="clearSearch"></icon>
			</view>
		</view>

		<!-- 列表区域 -->
		<scroll-view class="group-list" scroll-y enable-back-to-top @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" refresher-threshold="45" refresher-triggered="refresherTriggered"
			@scrolltolower="onLoadMore">
			<!-- 状态筛选 -->
			<view class="filter-bar">
				<view class="filter-chip" :class="{ active: currentStatus === '' }" @tap="changeStatus('')">
					全部
				</view>
				<view class="filter-chip" :class="{ active: currentStatus === 0 }" @tap="changeStatus(0)">
					招募中
				</view>
				<view class="filter-chip" :class="{ active: currentStatus === 1 }" @tap="changeStatus(1)">
					已成团
				</view>
				<view class="filter-chip" :class="{ active: currentStatus === 2 }" @tap="changeStatus(2)">
					已出发
				</view>
				<view class="filter-chip" :class="{ active: currentStatus === 3 }" @tap="changeStatus(3)">
					已结束
				</view>
				<view class="filter-chip" :class="{ active: currentStatus === 4 }" @tap="changeStatus(4)">
					已取消
				</view>
			</view>

			<!-- 团列表 -->
			<view v-if="groups.length > 0" class="groups-container">
				<view v-for="group in groups" :key="group.id" class="group-card">
					<!-- 卡片头部 -->
					<view class="card-header">
						<view class="card-title">{{ group.groupName }}</view>
						<view class="status-badge"
							:class="getStatusClass(group.status, group.startDate, group.endDate)">
							{{ getStatusText(group.status, group.startDate, group.endDate) }}
						</view>
					</view>

					<!-- 卡片信息 -->
					<view class="card-info">
						<view class="info-row">
							<text class="label">团号：</text>
							<text class="value">{{ group.groupCode || '暂无' }}</text>
						</view>
						<view class="info-row">
							<text class="label">行程：</text>
							<text class="value">{{ group.itineraryName || '暂无' }}</text>
						</view>
						<view class="info-row">
							<text class="label">日期：</text>
							<text class="value">{{ formatDateRange(group.startDate, group.endDate) }}</text>
						</view>
						<view class="info-row combined-info">
							<view class="info-item">
								<text class="label">导游：</text>
								<text class="value">{{ group.guideName || '未分配' }}</text>
							</view>
							<view class="info-item">
								<text class="label">车辆信息：</text>
								<text class="value">{{ group.driverName || '未分配' }} -{{ group.vehicleLicensePlate || '未分配' }}
									{{ group.vehicleType ? `(${group.vehicleType})` : '' }}</text>
							</view>
						</view>
					</view>
					<!-- 按钮组 -->
					<view class="button-group">
						<view class="cancel-button" @tap="navigateToDetail(group.id)">
							取消团
						</view>
						<view class="detail-button" @tap="navigateToDetail(group.id)">
							查看详情
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view v-if="loading" class="loading-more">
					<text>加载中...</text>
				</view>
				<view v-else-if="!hasMore" class="no-more">
					<text>没有更多数据了</text>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-else-if="!loading" class="empty-state">
				<text class="empty-text">暂无旅游团数据</text>
			</view>

			<!-- 初始加载 -->
			<view v-if="loading && groups.length === 0" class="loading-state">
				<text>加载中...</text>
			</view>
		</scroll-view>

		<!-- 浮动添加按钮 -->
		<view class="floating-button" @tap="navigateToAdd">
			<view class="add-icon">+</view>
		</view>
	</view>
</template>

<script>
	import {
		getTourGroupList
	} from '@/https/tourgroup.js';

	export default {
		data() {
			return {
				groups: [], // 团列表数据
				searchQuery: '', // 搜索关键词
				currentStatus: '', // 当前筛选状态
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				total: 0, // 总数据量
				loading: false, // 加载中状态
				hasMore: true, // 是否有更多数据
				refresherTriggered: false // 下拉刷新状态
			};
		},
		onLoad() {

		},
		onShow() {
			// 页面加载时获取数据
			this.loadData(true);
		},
		methods: {
			// 加载数据
			async loadData(isRefresh = false) {
				if (this.loading) return;

				this.loading = true;

				try {
					// 重置页码
					if (isRefresh) {
						this.pageNum = 1;
						this.groups = [];
					}

					// 构建请求参数
					const params = {
						openId: null, // 实际使用时需要传入真实的openId
						groupName: this.searchQuery || null,
						status: this.currentStatus === '' ? null : this.currentStatus,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					};

					// 调用接口获取数据
					const res = await getTourGroupList(params);

					const data = res || {};
					const list = data.result || [];
					const total = data.totalPage || 0;

					// 更新数据
					if (isRefresh) {
						this.groups = list;
					} else {
						this.groups = [...this.groups, ...list];
					}

					this.total = total;
					this.hasMore = this.groups.length < total;

					// 增加页码
					if (!isRefresh) {
						this.pageNum++;
					}
				} catch (error) {
					console.error('获取旅游团列表失败:', error);
					uni.showToast({
						title: '获取数据失败，请重试',
						icon: 'none'
					});
				} finally {
					this.loading = false;
					this.refresherTriggered = false;
				}
			},

			// 格式化日期范围
			formatDateRange(startDate, endDate) {
				const formatDate = (dateStr) => {
					if (!dateStr || dateStr === '0001-01-01T00:00:00') return '--';
					try {
						// 处理日期字符串，确保兼容 iOS 支持的格式
						// iOS 支持的格式: "yyyy/MM/dd"、"yyyy/MM/dd HH:mm:ss"、"yyyy-MM-dd"、"yyyy-MM-ddTHH:mm:ss"、"yyyy-MM-ddTHH:mm:ss+HH:mm"
						let normalizedDateStr = dateStr;
						
						// 如果日期字符串包含空格分隔符，将其替换为 T 以符合 ISO 格式
						if (normalizedDateStr.includes(' ')) {
							const parts = normalizedDateStr.split(' ');
							if (parts.length >= 2) {
								normalizedDateStr = `${parts[0]}T${parts[1]}`;
							}
						}
						
						// 创建日期对象
						const date = new Date(normalizedDateStr);
						
						// 验证日期是否有效
						if (isNaN(date.getTime())) {
							return '--';
						}
						
						return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
					} catch (e) {
						console.error('日期格式化错误:', e);
						return '--';
					}
				};

				const start = formatDate(startDate);
				const end = formatDate(endDate);

				return `${start} 至 ${end}`;
			},

			// 获取状态文本
			getStatusText(status, startDate, endDate) {
				// 如果状态是已成团(1)，需要根据日期进行动态判断
				if (status === 1) {
					const now = new Date();
					const start = new Date(startDate);
					const end = new Date(endDate);

					// 如果开始时间大于结束时间，标记为已结束
					if (start > end) {
						return '已结束';
					}
					// 如果当前时间在开始时间之后，结束时间之前，标记为已出发
					if (now >= start && now <= end) {
						return '已出发';
					}
				}

				// 基本状态映射
				const statusMap = {
					0: '招募中',
					1: '已成团',
					2: '已出发',
					3: '已结束',
					4: '已取消'
				};
				return statusMap[status] || '未知';
			},

			// 获取状态样式类
			getStatusClass(status, startDate, endDate) {
				// 如果状态是已成团(1)，需要根据日期进行动态判断
				if (status === 1) {
					const now = new Date();
					const start = new Date(startDate);
					const end = new Date(endDate);

					// 如果开始时间大于结束时间，应用已结束样式
					if (start > end) {
						return 'status-completed';
					}
					// 如果当前时间在开始时间之后，结束时间之前，应用已出发样式
					if (now >= start && now <= end) {
						return 'status-started';
					}
				}

				// 基本状态样式映射
				const classMap = {
					0: 'status-recruiting',
					1: 'status-formed',
					2: 'status-started',
					3: 'status-completed',
					4: 'status-canceled'
				};
				return classMap[status] || 'status-unknown';
			},

			// 搜索处理
			handleSearch() {
				this.loadData(true);
			},

			// 清除搜索
			clearSearch() {
				this.searchQuery = '';
				this.loadData(true);
			},

			// 改变状态筛选
			changeStatus(status) {
				this.currentStatus = status;
				this.loadData(true);
			},

			// 下拉刷新 - 拉动中
			onPulling() {
				// 可以在这里添加拉动时的自定义动画
			},

			// 下拉刷新 - 触发刷新
			onRefresh() {
				this.loadData(true);
			},

			// 上拉加载更多
			onLoadMore() {
				if (!this.loading && this.hasMore) {
					this.loadData(false);
				}
			},

			// 跳转到详情页
			navigateToDetail(id) {
				uni.navigateTo({
					url: `/pages/groups/tourGroupDetail?groupId=${id}`,
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '跳转失败，请重试',
							icon: 'none'
						});
					}
				});
			},

			// 跳转到添加页面
			navigateToAdd() {
				uni.navigateTo({
					url: '/pages/groups/addgroup',
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '跳转失败，请重试',
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>

<style scoped>
	@import './groupslist.css';
</style>